<template>
    <div class="SellerAddress">
        <Row>
            <Col span="24">
                <Form ref="searchRef" :model="searchForm" :rules="searchRule" >
                    <div class="createMall-box">
                        <Row class="mt-10">
                            <Col span="22">
                                <Form-item prop="searchModel">
                                    <Input placeholder="请输入退货地址名称" :maxlength=20 v-model="searchForm.searchModel" style="width:200px"  @on-enter="searchEnter" enter-button/> 注:按回车键进行搜索
                                </Form-item>    
                            </Col>
                            <Col span="2">
                                    <Button type="primary" @click.native="openSellerAddress">添加</Button>
                            </Col>
                        </Row> 
                    </div>
                </Form>
                <Table :columns="SellerAddressColumns" :data="SellerAddressData"></Table>
                <Page
                    ref="SellerAddressPage"
                    :total="searchData.totalElements"
                    :page-size="searchData.size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    show-sizer
                    :page-size-opts="[5, 10, 20, 30, 40]"
                    show-total
                    style="margin-top:30px;text-align:center;">
                </Page>
                <!-- 新增/编辑弹窗 -->
                    <Modal v-model="addSellerAddressModel" :mask-closable="false" width='600'>
                    <p slot="header">
                        <span>{{freightTitle}}</span>
                    </p>
                    <div>
                        <Form ref="SellerAddressRef" :model="addSellerAddressForm" :rules="addSellerAddressRule" :label-width="100">
                            <Form-item label="退货点名称" prop="name">
                                <Input placeholder="请输入退货点名称" :maxlength=20 v-model="addSellerAddressForm.name" style="width:400px"/>
                            </Form-item>
                            <Form-item label="收货人名称" prop="connectPerson">
                                <Input placeholder="请输入收货人名称" :maxlength=20 v-model="addSellerAddressForm.connectPerson" style="width:400px"/>
                            </Form-item>
                            <Form-item label="联系方式" prop="telephone">
                                <Input placeholder="请输入联系方式" :maxlength=20 v-model="addSellerAddressForm.telephone" style="width:400px"/>
                            </Form-item>
                            <Form-item label="退货地址">
                                <div class="flex">
                                     <Form-item prop="area">
                                        <div>
                                            <Cascader :data="provinceList" v-model="addSellerAddressForm.area" style="width: 200px" @on-change="changeArea"></Cascader>
                                        </div>
                                    </Form-item>
                                     <Form-item prop="address">
                                        <div>
                                            <Input v-model="addSellerAddressForm.address" placeholder="请输入详细地址" style="width:200px"/>
                                        </div>
                                    </Form-item>
                                </div>
                            </Form-item>
                        </Form>
                    </div>
                    <div slot="footer" class="footer ta-c">
                        <Button type="primary" @click.native="submitFreight('SellerAddressRef')" :loading="cityLoading">提交</Button>
                        <Button type="primary" @click.native="closetFreight">取消</Button>
                    </div>
                </Modal>
            </col>
        </Row>
    </div>
</template>
<script>
export default {
    name: 'SellerAddress',
    props: ['shopIds'],
    data () {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('此项为必填项'));
            } else {
                if (this.addSellerAddressForm.address !== '') {
                    // 对第二个密码框单独验证
                    var passReg = /^[a-zA-Z0-9\u4e00-\u9fa5]*$/;
                    if (!passReg.test(this.addSellerAddressForm.address)) {
                        callback(new Error('只能输入汉字数字英文'));
                    } else {
                        callback();
                    }
                }
            }
        };
        return {
            shopId: '',
            showSpin: false,
            cityLoading: false,
            // 分页
            searchData: {
                name: '',
                totalElements: 1,
                page: 0,
                size: 10
            },
            // 搜索
            searchForm: {
                searchModel: ''
            },
            searchRule: {
                searchModel: [
                    { message: '请输入地址名称', trigger: 'blur' },
                    { type: 'string', max: 20, message: '最多输入20个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ]
            },
            // tree
            SellerAddressColumns: [
                {
                    title: '退货点名称',
                    align: 'center',
                    minWidth: 150,
                    key: 'name',
                    tooltip: true
                },
                {
                    title: '收货人',
                    align: 'center',
                    minWidth: 150,
                    key: 'connectPerson',
                    tooltip: true
                },
                {
                    title: '联系方式',
                    align: 'center',
                    minWidth: 150,
                    key: 'telephone',
                    tooltip: true
                },
                {
                    title: '收货地址',
                    align: 'center',
                    minWidth: 150,
                    key: 'SellerAddr',
                    tooltip: true,
                    render: (h, params) => {
                        console.log(params.row, '100101');
                        return h('span', {
                            prop: {
                                value: params.row.province + params.row.city + params.row.district + params.row.address
                            }
                        }, params.row.province + params.row.city + params.row.district + params.row.address);
                    }

                },
                {
                    title: '更新时间',
                    align: 'center',
                    minWidth: 150,
                    key: 'createTime',
                    tooltip: true
                },
                {
                    title: '操作',
                    align: 'center',
                    minWidth: 150,
                    key: 'action',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {}, [
                                h('Button', {
                                    prop: {
                                        align: 'center',
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                            this.writeSller(params.row);
                                        }
                                    }
                                }, '编辑')
                            ]),
                            h('Button', {
                                prop: {
                                    align: 'center',
                                    type: 'primary'
                                },
                                on: {
                                    click: () => {
                                        this.deleteSller(params.row.id);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            SellerAddressData: [],
            // 弹窗
            addSellerAddressModel: false,
            freightTitle: '添加退货点',
            addSellerAddressForm: {
                name: '',
                connectPerson: '',
                telephone: '',
                province: '',
                city: '',
                district: '',
                area: [],
                address: ''

            },
            addSellerAddressRule: {
                name: [
                    { required: true, message: '请输入退货点名称', trigger: 'blur' },
                    { type: 'string', max: 20, message: '最多输入20个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ],
                connectPerson: [
                    { required: true, message: '请输入收货人名称', trigger: 'blur' },
                    { type: 'string', max: 20, message: '最多输入20个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ],
                telephone: [
                    {required: true, message: '请输入联系方式', trigger: 'change'},
                    {type: 'string', pattern: /^[1][0-9]{10}$/, message: '联系电话只能有11位', trigger: 'blur'}
                ],
                area: [
                    {required: true, type: 'array', message: '请选择地址信息', trigger: 'blur'},
                    {required: true, validator: validatePass, trigger: 'blur' }
                ],
                address: [
                    {required: true, message: '请输入地址详情', trigger: 'blur'},
                    {required: true, validator: validatePass, trigger: 'blur' }
                ]

            },
            provinceList: [],
            cityList: [],
            districtList: []
        };
    },
    mounted () {
        this.shopId = this.$route.query.id;
        console.log(this.shopIds);
        this.loadAreaData();
        this.searh();
    },
    methods: {
        searh () {
            depot.get({
                url: this.URL.EC_SELLER.GET_SELLER_ADDRESS_PAGE_BY_SHOP_ID + '?shopId=' + this.shopId +
                    '&page=' + this.searchData.page + '&size=' + this.searchData.size + '&name=' + this.searchForm.searchModel,
                cb: (data) => {
                    if (data.code === 0) {
                        console.log(data.data, '0p0p0p0');
                        this.SellerAddressData = data.data.content;
                        this.searchData.size = data.data.size;
                        this.searchData.totalElements = data.data.totalElements;
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            });
        },
        // 查询所有省市区
        loadAreaData () {
            depot.get({
                url: this.URL.DATA.FIND_ALL_BY_PARENT_ID,
                config: {
                    params: {
                        parentId: 1
                    }
                },
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        // this.continueCityList = data.data;
                        this.provinceList = data.data;
                        console.log(data.data, '地址');
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                }
            });
        },
        //  选择地址
        changeArea (value, selectedData) {
            console.log(value, 'diz');
            console.log(selectedData, 'dizselectedData');
            if (selectedData.length === 0) {
                this.addSellerAddressForm.provinceId = '';
                this.addSellerAddressForm.province = '';
                this.addSellerAddressForm.cityId = '';
                this.addSellerAddressForm.city = '';
                this.addSellerAddressForm.districtId = '';
                this.addSellerAddressForm.district = '';
            } else {
                this.addSellerAddressForm.provinceId = selectedData[0].code;
                this.addSellerAddressForm.province = selectedData[0].name;
                this.addSellerAddressForm.cityId = selectedData[1].code;
                this.addSellerAddressForm.city = selectedData[1].name;
                this.addSellerAddressForm.districtId = selectedData[2].code;
                this.addSellerAddressForm.district = selectedData[2].name;
            }
        },
        // 搜索
        searchEnter () {
            this.searh();
        },
        // 分页
        changePage (val) {
            this.searchData.page = val - 1;
            // this.findShop();
            localStorage.setItem('page', this.searchData.page);
        },
        changePageSize (val) {
            this.searchData.size = val;
            localStorage.setItem('size', this.searchData.size);
            // this.findShop();
        },
        // 添加退货地址
        openSellerAddress () {
            this.freightTitle = '添加退货点';
            this.addSellerAddressModel = true;
            this.addSellerAddressForm = {};
        },
        // 编辑退货地址
        writeSller (params) {
            this.addSellerAddressForm.area = [];
            this.freightTitle = '编辑退货点';
            this.addSellerAddressForm = params;
            this.addSellerAddressForm.id = params.id;
            this.addSellerAddressModel = true;
            this.addSellerAddressForm.area = [params.provinceId + '', params.cityId + '', params.districtId + ''];
            console.log(params, 'this.addSellerAddressForm.area');
        },
        deleteSller (id) {

        },
        submitFreight  (name) {
            this.addSellerAddressForm.shopId = this.shopId;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.cityLoading = true;
                    let url;
                    if (this.freightTitle === '编辑退货点') {
                        url = this.URL.EC_SELLER.UPDATE_SELLER_ADDRESS;
                    } else {
                        url = this.URL.EC_SELLER.SAVE_SELLER_ADDRESS;
                    }
                    depot.post({
                        url: url,
                        data: this.addSellerAddressForm,
                        cb: data => {
                            if (data.code === 0) {
                                if (this.freightTitle === '编辑退货点') {
                                    this.$Message.success('编辑退货点成功');
                                    this.cityLoading = false;
                                    this.searh();
                                    this.addSellerAddressModel = false;
                                } else {
                                    this.$Message.success('新增退货点成功');
                                    this.cityLoading = false;
                                    this.searh();
                                    this.addSellerAddressModel = false;
                                    this.$refs['SellerAddressRef'].resetFields();
                                }
                            } else {
                                this.$Message.error(data.message);
                                this.cityLoading = false;
                            }
                        },
                        ce: (error) => {
                            this.$Message.error(data.message);
                            this.cityLoading = false;
                        }
                    });
                }
            });
        },
        closetFreight () {
            console.log(123);
            if (this.freightTitle === '添加退货点') {
                this.addSellerAddressModel = false;
                this.$refs['SellerAddressRef'].resetFields();
            } else {
                this.addSellerAddressModel = false;
            }
        }
    },
    watch: {
        shopIds (newVal, oldVal) {
            console.log(newVal, oldVal, this.shopId, 'sellerAdress');
            if (newVal) {
                this.shopId = newVal;
            }
            this.searh();
        }
    }
};
</script>
<style lang="less" scoped>
    .SellerAddress{
        /deep/.ivu-modal-footer{
            padding: 0;
        }

    }
    .flex{ 
        display: flex;
    }
</style>

